<template>
	<block>
		<hxt-layout id="hxt-layout" title="日程" svc="schedule" initTitle="日程加载失败" @initPage="initPage">
			<view class="hxt-flex-column" style="background-color: #F5F5F5;" v-if="show">
				<van-calendar color="#07c160" :show-subtitle="false" :show="show" type="single" :formatter="formatter"
					:poppable="false" :min-date="minDate" :max-date="maxDate" :show-confirm="false" :default-date="date"
					@confirm="onConfirm">
					<template v-slot:title>
						<view class="hxt-flex padding-lr-sm">
							<view @click="!prevMonth.disabled&&goto(0,prevMonth.date)"
								:class="[prevMonth.disabled?'color-gray':'color-blue']">
								<van-icon name="arrow-left"></van-icon>
								{{prevMonth.m}}
							</view>

							<view class="hxt-flex-fill text-center">
								<text class="bold">{{currentMonth.m}}</text>
								<van-icon name="location-o" class="color-blue"
									@click="goto(1,currentMonth.date)">今天</van-icon>
								</div>
							</view>
							<view :class="[nextMonth.disabled?'color-gray':'color-blue']"
								@click="!nextMonth.disabled&&goto(2,nextMonth.date)">
								{{nextMonth.m}}
								<van-icon name="arrow"></van-icon>
							</view>
						</view>
					</template>
				</van-calendar>
				<view class="hxt-flex-fill" style="height: 1px;margin: 20px 0;">
					<van-cell-group inset custom-class="van-cell-group-scroll" :border="false">
						<van-cell title-style="flex:none;min-width:150rpx;" v-for="item in objList" :key="item.schId"
							:title="item.schTitle" :value="item.schMark"></van-cell>
					</van-cell-group>
				</view>
			</view>
			<movable-area style="position: absolute;top: 10%;right: 10%;width: 90%;height: 70%;pointer-events: none;">
				<movable-view :x="x" :y="y" class="hxt-maview" direction="all">
					<view class="cu-tag round bg-blue padding shadow-blur" @click="AddCar(0)">日程</view>
				</movable-view>
			</movable-area>
			<page-container v-if="showAdd" :show="showAdd" position="bottom"
				@clickoverlay="closeAdd" @afterleave="closeAdd" round>
				<view class="hxt-flex-column" style="height: 90vh;">
					<view class="cu-bar bg-white solid-bottom" style="background-color:#eee;">
						<view class="action">
							<text class="cuIcon-title text-orange "></text>添加日程
						</view>
						<view class="action">
							<button class="cu-btn line-cyan round shadow sm" style="width:auto;" @click="closeAdd">关闭</button>
						</view>
					</view>
					<view class="hxt-flex-fill" style="height: 1px;">
						<scroll-view scroll-y style="height:100%;background-color: #F5F5F5;" enable-back-to-top="true"
							:enhanced="true" :bounces="false">
							<view style="padding: 1rpx 0;">
								<view
									style="background-color: #FFFFFF;padding: 30rpx;margin: 20rpx;border-radius: 15rpx;">
									<view class="padding-bottom">
										<text class="text-red">*</text>
										<text style="font-weight: bold;">标题</text>
										<!-- <text v-if="!!item.gkMark">（{{item.gkMark}}）</text> -->
									</view>
									<view class="inputborder">
										<hxt-input type="digit" :border="false"
											v-model="obj.schTitle" placeholder="请输入标题">
										</hxt-input>
									</view>
								</view>
								<view style="background-color: #FFFFFF;padding: 30rpx;margin: 20rpx;border-radius: 15rpx;">
									<view class="padding-bottom">
										<text class="text-red">*</text>
										<text style="font-weight: bold;">日期</text>
										<!-- <text v-if="!!item.gkMark">（{{item.gkMark}}）</text> -->
									</view>
								
									<view class="hxt-flex">
										<view class="hxt-flex-fill"
											style="box-sizing: border-box;border-radius: 8rpx;border: 2rpx solid #e5e5e5;">
											<view class="hxt-flex"
												style="align-items: center;justify-content: space-between;border-radius: 8rpx;font-size: 28rpx;height: 64rpx;padding: 0 20rpx;">
												<hxt-calendar style="width: 100%;" v-model="obj.schDate" type="single" :showConfirm="false"></hxt-calendar>
											</view>
										</view>
									</view>
									<!-- <view v-if="!!formERR.schDateERR"
										style="color:#ee0a24;font-size:24rpx;text-align: right;margin-top: 10rpx;">
										{{formERR.schDateERR}}
									</view> -->
								</view>
								<view
									style="background-color: #FFFFFF;padding: 30rpx;margin: 20rpx;border-radius: 15rpx;">
									<view class="padding-bottom">
										<text style="font-weight: bold;">备注</text>
										<!-- <text v-if="!!item.gkMark">（{{item.gkMark}}）</text> -->
									</view>
									<view class="inputborder">
										<hxt-input class="hxt-flex-fill" :border="false" type="textarea"
											v-model="obj.schMark" maxlength="400" placeholder="请输入备注" autosize
											show-word-limit>
										</hxt-input>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="padding-sm">
						<!-- <van-submit-bar button-text="提交" custom-class="submit-bar" @submit="submit" :safe-area-inset-bottom="false">
						</van-submit-bar> -->
						<button class="cu-btn round bg-cyan shadow" @click="submit"
										style="background-color: #1cbbb4;width: 100%;">保 存</button>
					</view>
				</view>
			</page-container>
			
		</hxt-layout>
	</block>
</template>
<script>
	import hxt from "@/utils/hxt.js"
	var list = [];
	export default {
		data() {
			const app = getApp();
			return {
				list: [],
				show: false,
				currentUser: app.globalData.currentUser,
				minDate: new Date(hxt.dateConfig().monthBegin).getTime(),
				maxDate: new Date(hxt.dateConfig().monthEnd).getTime(),
				objList: [],
				date: new Date(),
				oldData: {
					obj: ""
				},
				obj: {
					optType: 0,
					schId: 0,
					schTitle: '',
					schDate: '',
					schMark: ''
				},
				showAdd:false,
			}
		},
		onShow: function(e) {
			
		},
		watch: {
			date: function(val) {
				var _this = this;
				_this.objList = _this.list.filter(function(item) {
					return item.schDate == hxt.dateFormat("yyyy-MM-dd", val);
				});
			}
		},
		computed: {
			currentMonth: function() {
				return {
					m: hxt.dateFormat("yyyy年MM月", this.date),
					date: this.date,
				};
			},
			prevMonth: function() {
				return {
					m: hxt.dateFormat('M月', hxt.dateAdd('M', -1, hxt.dateFormat('yyyy-MM-01', this.date))),
					date: hxt.dateAdd('M', -1, hxt.dateFormat('yyyy-MM-01', this.date)),
					disabled: hxt.dateAdd('M', -6, hxt.dateFormat('yyyy-MM-dd')) > hxt.dateAdd('M', 0, this.date)
				};
			},
			nextMonth: function() {
				return {
					m: hxt.dateFormat('M月', hxt.dateAdd('M', +1, hxt.dateFormat('yyyy-MM-01', this.date))),
					date: hxt.dateAdd('M', +1, hxt.dateFormat('yyyy-MM-01', this.date)),
					disabled: hxt.dateAdd('M', +6, hxt.dateFormat('yyyy-MM-dd')) < hxt.dateAdd('M', 0, this.date)
				};
			}
		},
		methods: {
			initPage: function(e) { //初始化事件
				var _this = this;
				if (!e.user) e.callBack('个人资料加载失败');
				_this.loadList();
			},
			loadList: function() {
				var _this = this;
				hxt.post({
					url: hxt.domain + 'pc/scheduleList',
					data: {
						beginTime: hxt.dateConfig(this.date).monthBegin,
						endTime: hxt.dateConfig(this.date).monthEnd,
						pageIndex: 1,
						pageSize: 100
					},
					ok: function(res) {
						if (res.data.code != 0) return hxt.Notify({
							type: 'danger',
							message: '加载失败：：' + res.data.errmsg + '，请稍后重试！'
						});
						_this.list = res.data.data.list;
						list = res.data.data.list;
						_this.$nextTick(function() {
							_this.show = true;
							_this.objList = _this.list.filter(function(item) {
								return item.schDate == hxt.dateFormat("yyyy-MM-dd",_this.date);
							});
						});
					},
					fail: function(res) {
						hxt.Notify({
							type: 'danger',
							message: '加载失败：：' + res.data.errmsg + '，请稍后重试！'
						});
					}
				});
			},
			formatter: function(day) {
				var obj = list.find(function(item) {
					return item.schDate == hxt.dateFormat("yyyy-MM-dd", day.date);
				});
				if (!!obj) {
					day.bottomInfo = obj.schTitle;
				}
				return day;
			},
			onConfirm: function(e) {
				var _this = this,
					date = hxt.dateFormat("yyyy-MM-dd", e.detail);
				_this.date=e.detail;
				_this.objList = _this.list.filter(function(item) {
					return item.schDate == date;
				});
			},
			goto: function(type, date) { //0上一月 1今天 2下一月
				var _this = this,
					date = type == 1 ? new Date() : date;
				_this.show = false;
				_this.date = date;
				_this.loadList();
				_this.$nextTick(function() {
					_this.minDate = new Date(hxt.dateConfig(date).monthBegin).getTime();
					_this.maxDate = new Date(hxt.dateConfig(date).monthEnd).getTime();
				});
			},
			AddCar: function(flag) {
				var _this = this,
					obj = {
						optType: flag,
						schId: 0,
						schTitle: '',
						schDate: hxt.dateFormat("yyyy-MM-dd",_this.date),
						schMark: ''
					};
				if (flag == 0) {
					_this.obj = obj;
					_this.oldData.obj = JSON.stringify(_this.obj);
					_this.showAdd = true;
					return;
				};
			},
			closeAdd: function(e) {
				var _this = this;
				_this.showAdd = false;
			},
			submit: function(e) {
				var _this = this,
					obj = _this.obj;
				if (_this.oldData.obj == JSON.stringify(_this.obj)) return hxt.Notify({
					type: 'warning',
					message: '提交失败：资料未更改'
				});
				if (!hxt.trim(obj.schTitle)) return hxt.Notify({
					type: 'danger',
					message: '提交失败：请输入日程标题'
				});				
				hxt.confirm("确定添加？", "", function() {
					hxt.post({
						url: hxt.domain + "pc/scheduleSave",
						data: obj,
						ok: function(res) {
							if (res.data.code != 0) {
								hxt.Notify({
									type: 'danger',
									message: '操作失败：' + res.data.errmsg
								});
								return;
							};
							hxt.Notify({
								type: 'success',
								message: '操作成功',
								duration: 1000
							});
							_this.loadList();
							_this.showAdd = false;
						},
						fail: function(res) {
							hxt.Notify({
								type: 'danger',
								message: '操作失败：' + res.errMsg
							});
						}
					});
				});
			},
		}
	}
</script>

<style>

	.van-button {
		height: 100% !important;
	}
	.inputborder {
		border: 2rpx solid #e5e5e5;
		border-radius: 8rpx;
		background-color: #fff;
		padding: 1rpx 10rpx;
	}
	
	.inputborder .van-cell {
		padding: 10rpx !important;
	}
	
	.txt-css {
		word-break: break-all;
		word-wrap: break-word;
		white-space: pre-line;
	}
	.submit-bar {
		position: sticky !important;
		z-index: 0 !important;
	}
</style>